<template>
  <div class="fromBox" :UserListData="UserListData">
    <el-form :label-position="labelPosition" label-width="100px" :model="fromData" :rules="languageData.id=='Chinese'?rules:rules2" ref="fromData">
      <!--公司名称-->
      <el-form-item class="item" :label="languageData.from.label.companyId" prop="companyName">
        <el-select v-show="radio == 1" v-model="fromData.companyId" placeholder=" " style="width: 60%;margin-right: 10px">
          <el-option v-for="item in options" :key="item.code" :label="item.CN" :value="item.code"></el-option>
        </el-select>
          <el-input v-show="radio == 2" v-model="fromData.companyName"  style="width: 60%;margin-right: 10px"></el-input>
        <template>
          <el-radio v-model="radio" label="1" size="mini">选择</el-radio>
          <el-radio v-model="radio" label="2" size="mini">新增</el-radio>
        </template>
      </el-form-item>
      <!--<el-form-item label="账号类型" prop="companyName">-->
        <!--<el-select v-model="fromData.level" placeholder=" " style="width: 100%">-->
          <!--<el-option v-for="item in level" :key="item.code" :label="item.CN" :value="item.code"></el-option>-->
        <!--</el-select>-->
      <!--</el-form-item>-->
      <!--账号-->
      <el-form-item :label="languageData.from.label.account" prop="account">
        <el-input v-model="fromData.account"></el-input>
      </el-form-item>
      <!--密码-->
      <el-form-item :label="languageData.from.label.password" prop="password">
        <el-input v-model="fromData.password" type="password"></el-input>
      </el-form-item>
      <!--提交-->
      <el-form-item label="">
        <div style="text-align: left" :CompanyListData="CompanyListData">
          <el-button type="primary" round class="submit" v-on:click="submitForm('fromData')"> {{languageData.public.done}} </el-button>
        </div>
      </el-form-item>
    </el-form>
    <!-- 表单-->
  </div>
</template>
<style scoped>
  .item{text-align: left}
  .submit{ width: 130px;height: 34px;line-height: 0px;background-color: #0e72b9;margin-top:40px;}
  .submit:hover{background-color: #409eff }
.fromBox{width: 500px;border: 1px solid #e1e1e1;margin: auto;background-color: white;padding: 40px 20px 40px 20px; border-radius:8px; box-shadow:0 0 16px #e2e7ea;padding-bottom: 10px; }
</style>
<script>
  import UserImg from '../../../static/img/icon/userDeFilt.png'
  import {mapState, mapActions} from 'vuex'
  export default {
    name: 'my-addUserFrom',
    data () {
      // 自定义密码校验
      var indeofPassword = (rule, value, callback) => {
        if (value === '') {
          callback(new Error('请再次输入密码'));
        } else if (value !== this.ruleForm2.pass) {
          callback(new Error('两次输入密码不一致!'));
        } else {
          callback();
        }
      };
      return {
        radio:'1',
        labelPosition: 'left',
        user: {
          imgUlr: UserImg, // 账号图片
          name: '小明管理员'
        },
        fromData: {
          companyName:'',
          companyId: '', // 商家名
          level:1,
          account: '', // 账号
          password: '' // 密码
        },
        rules: {
          companyId: [
            { required: true, message: '请选择用户商家', trigger: 'change' },
          ],
          account: [
            { required: true, message: '请输入登陆账号', trigger: 'blur' },
          ],
          password: [
            { required: true, message: '请输入登陆密码', trigger: 'blur' },
          ]
        },
        rules2: {
          companyId: [
            { required: true, message: 'Please choose the onwer', trigger: 'change' },
          ],
          account: [
            { required: true, message: 'Please fill the account', trigger: 'blur' },
          ],
          password: [
            { required: true, message: 'Please fill the password', trigger: 'blur' },
          ]
        },
        level: [{
          code: 2,
          CN: '付费',
          EN: ''
        },{
          code: 1,
          CN: '普通',
          EN: ''
        }],
     options: [{
        code: '1',
        CN: '大洋运输',
        EN: ''
      }],
        left: 'left'
      }
    },
    methods: {
      ...mapActions({
        addUser: 'addUser',
        getUserList: 'getUserList',
        getCompanyList: 'getCompanyList'
      }),
      tableRowClassName ({row, rowIndex}) {
        var x = rowIndex % 2
        if (x === 0) {
          return ''
        } else if (x === 1) {
          return 'success-row'
        }
        return ''
      },
      handleCurrentChange (val) {
      },
      login () {
        this.$router.push({ name: "map" })
      },
      submitForm (formName) {
        this.$refs[formName].validate((valid) => {
          if (valid) {
            var parm = {

              account: this.fromData.account, // 账号
              password: this.fromData.password // 密码
            }
            if(this.radio == 1){
              parm.companyId = this.fromData.companyId; // 商家名Id
            }
            if(this.radio == 2){
              parm.companyName = this.fromData.companyName; // 商家名
            }
            this.addUser(parm)
          } else {
            console.log('error submit!!')
            return false
          }
        })
      },
      companyListFn (res) {
        res = res.data
        this.options = []
        for (let i in res) {
          var pu =  {
              code: res[i].id,
              CN: res[i].name,
              EN: ''
            }
          this.options.push(pu)
        }
      },
      listStatus (res) {
        this.loading = false
        // 清空 vuex 中的本次记录，以免被下次操作状态造成混淆
        this.$store.commit('updateStatusTo', {body: null})
        this.fromData = {
          companyId: null, // 商家名
          account: null, // 账号
          password: null // 密码
        }
        if (res.status == 0) {
          // 修改成功
          var text =  this.languageData.id=='Chinese'? '创建账号成功': 'Create account successfully'
          this.openSuccess(text)
          var parm ={
            userId:''
          }
          this.getCompanyList(parm)
        }
        if (res.status != 0) {
          // 修改成功 修改失败
          var text = ''
          if(res.status == 60001){
            text = this.languageData.id=='Chinese'? '该账号已注册': 'Account already exists'
          }else if(res.status == 70001){

            text = this.languageData.id=='Chinese'? '该公司已注册': 'Company already exists'
          } else {
          text =  this.languageData.id=='Chinese'? '创建账号失败': 'Create account failed'
          }
          this.openError(text)
        }
      },
      openSuccess (text) {
        this.$message({
          message: text,
          type: 'success'
        })
      },
      openError (text) {
        this.$message.error(text)
      }
    },
    computed: {
      UserListData: function () {
        var parm = this.updateStatus
        if (parm) {
          this.listStatus(parm)
        }
        return 1
      },
      updateStatusData: function () {
        var parm = this.updateStatus
        if (parm) {
          this.listStatus(parm)
        }
        return 1
      },
      CompanyListData: function () {
        var parm = this.CompanyList
        if (parm) {
          this.companyListFn(parm.body)
        }
        return 1
      },
      languageData: function () {
        var parm = this.language
        if (parm) {
          if (parm.check == 'Chinese') {
            parm = parm.Chinese
          }
          if (parm.check == 'English') {
            parm = parm.English
//            this.formConfig.labelWidth = '200px'
//            dom.style = 'width:620px'
          }
          // 替换 其他交互数据
//          this.updateDate(parm)
        }
        return parm
      },
      ...mapState([
        'updateStatus',
        'language',
        'UserList',
        'CompanyList'
      ])
    },
    mounted () {
    var parm ={
      userId:''
    }
    this.getCompanyList(parm)
    },
    components: {
    }
  }
</script>

